The "CSS Wizardry" topic is still closed so I'll post this here before forgetting ...
I was looking for a way to do a 4 states cycling checkbox (and without using images, to avoid the hosting hassle).
I found several solutions online, through CSS only or JS+CSS, that looked great but couldn't be applied to Roll20 (either because of the JS part, or the CSS which would require the use of IDs).
So I cobbled my own thing, which is not CSS only, but uses sheet workers.
It's not pretty but it works : basically, it's an invisible checkbox on top of a radiobutton with 4 values.
When clicking the checkbox, it fires a sheet worker which modified the attribute associated with the radiobutton (the value of the checkbox doesn't matter).
There is probably a better and more elegant solution, though...
GIF (click to see it in motion) :
HTML:
I was looking for a way to do a 4 states cycling checkbox (and without using images, to avoid the hosting hassle).
I found several solutions online, through CSS only or JS+CSS, that looked great but couldn't be applied to Roll20 (either because of the JS part, or the CSS which would require the use of IDs).
So I cobbled my own thing, which is not CSS only, but uses sheet workers.
It's not pretty but it works : basically, it's an invisible checkbox on top of a radiobutton with 4 values.
When clicking the checkbox, it fires a sheet worker which modified the attribute associated with the radiobutton (the value of the checkbox doesn't matter).
There is probably a better and more elegant solution, though...
GIF (click to see it in motion) :
HTML:
<span class="cyclestate"> <input type="checkbox" name="attr_COMprogsel" title="Combat, progression" /> <input type="radio" name="attr_COMprog" value="-1" checked /><span>◼</span> <input type="radio" name="attr_COMprog" value="0" /><span>☐</span> <input type="radio" name="attr_COMprog" value="5" /><span>☑</span> <input type="radio" name="attr_COMprog" value="10" /><span>☒</span> </span>Sheet worker:
on("change:COMprogsel", function(){ getAttrs(["COMprog"], function(values){ var prog = parseInt(values.COMprog) || 0; var newprog = -1; switch(prog) { case -1: newprog = 0; break; case 0: newprog = 5; break; case 5: newprog = 10; break; case 10: newprog = -1; break; default: newprog = -1; } setAttrs({COMprog: newprog}); }); });CSS:
span.sheet-cyclestate input[type="checkbox"]{ opacity: 0; z-index: 20; width: 18px; height: 18px; margin-right: -18px; } span.sheet-cyclestate input[type="radio"]{ z-index: 1; } span.sheet-cyclestate input[type="radio"], span.sheet-cyclestate input[type="radio"] + span { display: none; } span.sheet-cyclestate input[type="radio"]:checked + span { display: inline-block; width: 18px; text-align: center; -webkit-user-select: none; -moz-user-select: none; font-size: 18px; color : #231F20; }